<template>
  <div class="payadd">
    <el-tabs type="border-card">
      <el-tab-pane v-if="$route.query.type == 'Add'" label="新增计费项目">
        <div class="box1">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="100px"
            class="demo-ruleForm"
          >
            <div class="top">
              <el-form-item label="计费项目名称" prop="payname">
                <el-input v-model="ruleForm.payname"></el-input> </el-form-item
              ><el-form-item label="项目优先级" prop="paylevel">
                <el-input v-model="ruleForm.paylevel"></el-input> </el-form-item
              ><el-form-item label="项目用量/时长" prop="paynum">
                <el-input v-model="ruleForm.paynum"></el-input> </el-form-item
              ><el-form-item label="项目价格" prop="paymoney">
                <el-input v-model="ruleForm.paymoney"></el-input>
              </el-form-item>
              <el-form-item label="通知状态" prop="paystatus">
                <el-select
                  v-model="ruleForm.paystatus"
                  placeholder="请选择状态"
                >
                  <el-option label="已通知" :value="1"></el-option>
                  <el-option label="未通知" :value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="计费目录" prop="c_id">
                <el-select v-model="ruleForm.c_id" placeholder="请选择目录">
                  <el-option label="电费目录" :value="7"></el-option>
                  <el-option label="水费固定月目录" :value="8"></el-option>
                  <el-option label="水费按量目录" :value="9"></el-option>
                  <el-option label="天然气目录" :value="10"></el-option>
                  <el-option label="物业费费目录" :value="11"></el-option>
                  <el-option label="宽带费目录" :value="12"></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div class="bottom">
              <el-form-item label="通知内容" prop="paycontent">
                <v-md-editor
                  v-model="ruleForm.unitcontext"
                  width="500px"
                  height="400px"
                ></v-md-editor>
              </el-form-item>
            </div>
          </el-form>
        </div>
      </el-tab-pane>
      <el-tab-pane v-if="$route.query.type == 'DETAIL'" label="计费项目查看">
        <div class="box2">
          <el-form ref="form" :model="form2" label-width="80px">
            <el-form-item label="计费项目名称：">
              <span>{{ form2.payname }}</span>
            </el-form-item>
            <el-form-item label="项目优先级："
              ><span>{{ form2.paylevel }}</span>
            </el-form-item>
            <el-form-item label="项目用量/时长："
              ><span>{{ form2.paynum }}</span>
            </el-form-item>
            <el-form-item label="项目价格：">
              <span>{{ form2.paymoney }}</span></el-form-item
            >
            <el-form-item label="通知状态："
              ><span>{{ form2.paystatus }}</span>
            </el-form-item>
            <el-form-item label="通知人："
              ><span>{{ form2.username }}</span>
            </el-form-item>
            <el-form-item
              label="通知内容：
"
            >
              <span v-html="form2.paycontent"></span>
            </el-form-item>
          </el-form>
        </div>
      </el-tab-pane>
      <div class="btns">
        <el-button v-show="false">默认按钮</el-button>
        <el-button type="primary" @click="back">返回</el-button>
        <el-button
          type="primary"
          v-if="$route.query.type == 'Add'"
          @click="submitForm('ruleForm')"
          >提交</el-button
        >
      </div>
    </el-tabs>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //表单2
      form2: null,
      //表单
      ruleForm: {
        payname: "",
        paylevel: "",
        paynum: "",
        paymoney: "",
        paystatus: "",
        c_id: "",
        paycontent: "",
        // coststatus: 2
      },
      rules: {
        payname: [
          { required: true, message: "计费项目不能为空", trigger: "blur" },
        ],
        paylevel: [
          { required: true, message: "项目级别不能为空", trigger: "blur" },
        ],
        paynum: [
          { required: true, message: "项目用量/时长不能为空", trigger: "blur" },
        ],
        paymoney: [
          { required: true, message: "项目价格不能为空", trigger: "blur" },
        ],
        paystatus: [{ required: true, message: "状态", trigger: "blur" }],
        c_id: [
          { required: true, message: "项目目录不能为空", trigger: "blur" },
        ],
      },
    };
  },
  methods: {
    //初始化表2
    getForm2() {
      // console.log(this.$route.query.type)
      if (this.$route.query.type == "DETAIL") {
        this.$axios
          .get("cost/getCostDetail", {
            params: {
              id: this.$route.query.id,
              token: sessionStorage.getItem("token"),
            },
          })
          .then((res) => {
            // console.log(res, "res");
            this.form2 = res.data[0];
            // console.log(this.form2, "form2");
          });
      }
    },
    //提交
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$confirm("添加, 是否继续?", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              this.$axios
                .post("cost/addCostData", {
                  payname: this.ruleForm.payname,
                  paylevel: this.ruleForm.paylevel,
                  paynum: this.ruleForm.paynum,
                  paymoney: this.ruleForm.paymoney,
                  paystatus: this.ruleForm.paystatus,
                  c_id: this.ruleForm.c_id,
                  paycontent: this.ruleForm.paycontent,
                  coststatus: 2,
                  token: sessionStorage.getItem("token"),
                })
                .then((res) => {
                  // console.log(res, "res");
                  this.$message({
                    type: "success",
                    message: "添加成功!",
                  });
                  this.$router.go(-1);
                });
            })
            .catch(() => {
              this.$message({
                type: "info",
                message: "已取消添加",
              });
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //返回
    back() {
      this.$router.go(-1);
    },
  },
  created() {
    this.getForm2();
  },
};
</script>

<style lang="scss" scoped>
.payadd::v-deep {
  .btns {
    position: fixed;
    right: 60px;
    top: 200px;
    display: flex;
    height: 78px;
    flex-direction: column;
    justify-content: space-between;
  }
  .box1 {
    .top {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      .el-form-item {
        width: 40%;
        .el-form-item__content {
          margin-left: 114px !important;
        }
        .el-form-item__label {
          width: 114px !important;
        }
        .el-select {
          width: 100%;
        }
      }
    }
    .bottom {
      display: flex;
      justify-content: center;
      .el-form-item {
        width: 90%;
        .el-form-item__content {
          margin-left: 114px !important;
        }
        .el-form-item__label {
          width: 102px;
        }
      }
    }
  }
  .box2 {
    .el-form-item__label {
      width: 120px !important;
    }
  }
}
</style>